@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content{
            height: 72vw;
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <el-row :gutter="24" justify="start" type="flex">
            <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12" :push="4">
                <el-form ref="formsModel" :model="formsModel" label-position="right" label-width="140px" size="medium" class="Va-forms" data-7512a93d>

                    <el-form-item label="存储类型" required prop="driver">
                        <el-radio-group v-model="formsModel.driver">
                            <el-radio label="local" border>本地存储</el-radio>
                            <el-radio label="qiniu" border>七牛云存储</el-radio>
                            <el-radio label="oss" border>阿里OSS存储</el-radio>
                            <el-radio label="cos" border>腾讯COS储存</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <div v-if="formsModel.driver == 'local'">
                        <div class="forms-divider" style="clear: both"><span class="left">本地存储配置</span> </div>
                        <el-form-item label="自动压缩" prop="compress">
                            <el-switch v-model="formsModel.config.compress" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>

                        <el-form-item label="压缩百分比" prop="compress" v-if="formsModel.config.compress">
                            <el-input-number v-model="formsModel.config.compress_ratio" :min="1" :max="100" label="压缩比例">
                            </el-input-number> %
                        </el-form-item>

                        <el-form-item label="自动裁剪" prop="crop">
                            <el-switch v-model="formsModel.config.crop" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>

                        <div v-if="formsModel.config.crop">
                            <el-form-item label="裁剪最大宽度" prop="compress" style="width: 50%;float: left;">
                                <el-input-number v-model="formsModel.config.crop_w" :min="1" :max="1000" label="压缩比例">
                                </el-input-number> px
                            </el-form-item>

                            <el-form-item label="裁剪最大高度" prop="compress" style="width: 50%;float: right;">
                                <el-input-number v-model="formsModel.config.crop_h" :min="1" :max="1000" label="压缩比例">
                                </el-input-number> px
                            </el-form-item>
                        </div>

                        <el-form-item label="开启水印" prop="watermark" style="clear: both">
                            <el-switch v-model="formsModel.config.watermark" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>

                        <div v-if="formsModel.config.watermark">
                            <el-form-item label="水印图片" prop="compress" style="width: 50%;float: left">
                                <va-picture v-model="formsModel.config.watermark_pic" :alt="false"></va-picture>
                                <span class="Va-help-block" data-7512a93d>
                                    <i class="fa fa-exclamation-circle"></i> 图片尺寸：350*350；文件大小不超过20MB，支持文件后缀格式：png,bmp,jpeg,jpg,gif
                                </span>
                            </el-form-item>

                            <el-form-item label="水印位置" prop="compress" style="width: 50%;float: right">
                                <div class="setup-file-compress">
                                    <label
                                            v-for="(item, index) in compressGravity"
                                            @click="compressGravityClick(item.value)"
                                            :class="{active:(item.value == formsModel.config.gravity)}">
                                        @{{item.label}}
                                    </label>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div v-if="formsModel.driver == 'qiniu'">
                        <div class="forms-divider" style="clear: both"><span class="left">七牛云存储配置</span> </div>
                        <el-form-item label="上传域名" prop="default">
                            <el-input v-model="formsModel.qiniu.default" placeholder="请填写七牛云上传域名" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>上传域名因存储区域不同而域名不同；详情点击 <a target="_blank" href="https://developer.qiniu.com/kodo/1671/region-endpoint-fq">七牛云文档</a> 查看；根据区域选择【加速上传域名】</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="文件域名" prop="https">
                            <el-input v-model="formsModel.qiniu.https" placeholder="请填写文件域名" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="access_key" prop="access_key">
                            <el-input v-model="formsModel.qiniu.access_key" placeholder="请填写七牛云access_key" maxlength="64" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="secret_key" prop="secret_key">
                            <el-input v-model="formsModel.qiniu.secret_key" placeholder="请填写七牛云secret_key" maxlength="64" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="bucket" prop="bucket">
                            <el-input v-model="formsModel.qiniu.bucket" placeholder="请填写七牛云bucket" maxlength="32" show-word-limit></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="formsModel.driver == 'oss'">
                        <div class="forms-divider" style="clear: both"><span class="left">阿里OSS存储配置</span> </div>
                        <el-form-item label="节点"  prop="endpoint">
                            <el-input v-model="formsModel.oss.endpoint" placeholder="请填写阿里OSS节点" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>上传域名因存储区域不同而节点不同，此处只需填写节点即可（例如：【cn-qingdao】）</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="AccessKeyId"  prop="access_id">
                            <el-input v-model="formsModel.oss.access_id" placeholder="请填写阿里RAM的accessKeyId" maxlength="32" show-word-limit></el-input>
                            <va-forms-tips>
                                当前后台采用STS临时访问凭证前端直传，此处应填写阿里云RAM的accessKeyId；<br>
                                详情点击<a target="_blank" href="https://help.aliyun.com/zh/oss/developer-reference/authorize-access-2?spm=a2c4g.11186623.0.0.294d4dd8mcZ7wm">阿里云文档</a> 查看如何创建【RAM用户】</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="accessKeySecret"  prop="access_key">
                            <el-input v-model="formsModel.oss.access_key" placeholder="请填写阿里RAM的accessKeySecret" maxlength="64" show-word-limit></el-input>
                            <va-forms-tips>
                                当前后台采用STS临时访问凭证前端直传，此处应填写阿里云RAM的accessKeySecret；<br>
                                详情点击<a target="_blank" href="https://help.aliyun.com/zh/oss/developer-reference/authorize-access-2?spm=a2c4g.11186623.0.0.294d4dd8mcZ7wm">阿里云文档</a> 查看如何创建【RAM用户】</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="RoleArn"  prop="role_arn">
                            <el-input v-model="formsModel.oss.role_arn" placeholder="请填写角色访问控制 RoleArn" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>
                                当前后台采用STS临时访问凭证前端直传，此处应填写阿里云RAM角色访问控制的roleArn；<br>
                                详情点击<a target="_blank" href="https://help.aliyun.com/zh/oss/developer-reference/authorize-access-2?spm=a2c4g.11186623.0.0.294d4dd8mcZ7wm">阿里云文档</a> 查看如何创建【临时访问凭证的角色】
                            </va-forms-tips>
                        </el-form-item>
                        <el-form-item label="临时凭证名称"  prop="role_session">
                            <el-input v-model="formsModel.oss.role_session" placeholder="请填写临时凭证名称" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>自定义设置临时凭证名称</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="bucket"  prop="bucket">
                            <el-input v-model="formsModel.oss.bucket" placeholder="请填写阿里OSSbucket" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开启https" prop="ssl">
                            <el-switch v-model="formsModel.oss.ssl" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="自定义域名" prop="is_custom">
                            <el-switch v-model="formsModel.oss.is_custom" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="自定义域名地址" prop="custom_domain" v-if="formsModel.oss.is_custom">
                            <el-input v-model="formsModel.oss.custom_domain" placeholder="请填写阿里OSS自定义域名地址" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="formsModel.driver == 'cos'">
                        <div class="forms-divider" style="clear: both"><span class="left">腾讯COS储存</span> </div>
                        <el-form-item label="SecretId"  prop="secret_id">
                            <el-input v-model="formsModel.cos.secret_id" placeholder="请填写腾讯云账户中的SecretId" maxlength="64" show-word-limit></el-input>
                            <va-forms-tips>
                                当前后台采用预签名URL前端直传，此处应填写腾讯云账户中的SecretId；<br>
                            </va-forms-tips>
                        </el-form-item>
                        <el-form-item label="SecretKey"  prop="secret_key">
                            <el-input v-model="formsModel.cos.secret_key" placeholder="请填写腾讯云账户中的SecretKey" maxlength="64" show-word-limit></el-input>
                            <va-forms-tips>
                                当前后台采用预签名URL前端直传，此处应填写腾讯云账户中的SecretKey；<br>
                            </va-forms-tips>
                        </el-form-item>
                        <el-form-item label="存储桶名称"  prop="bucket">
                            <el-input v-model="formsModel.cos.bucket" placeholder="请填写存储桶名称" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>存储桶名称 格式：BucketName-APPID</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="地域名称"  prop="region">
                            <el-input v-model="formsModel.cos.region" placeholder="请填写地域名称" maxlength="100" show-word-limit></el-input>
                            <va-forms-tips>上传域名因地域名称不同而节点不同，此处只需填写地域名称即可（例如：【ap-nanjing】）</va-forms-tips>
                        </el-form-item>
                        <el-form-item label="访问域名"  prop="cos_url">
                            <el-input v-model="formsModel.cos.cos_url" placeholder="请填写腾讯COS访问域名" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开启https" prop="ssl">
                            <el-switch v-model="formsModel.cos.ssl" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                    </div>

                    <el-form-item class="forms-fixed-bottom" style="clear: both">
                        <div class="Va-text-left" data-7512a93d>
                            <el-button class="Va-button" type="primary" size="medium"  @click="formsModelSubmit" :loading="config.loading" :disabled="config.disabled">
                                @{{config.loading ? '提交中...' : '提 交'}}
                            </el-button>
                            <el-button class="Va-button" @click="redirectPage('framework/setup/page/file')" type="default" size="medium">刷 新</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")
@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config,$Layouts],
            data: {
                config:{activeTabs:'1', permissions:false, menu_id:0,loading:false,view_loading:true,webSource:'basic',__table:'FileStore'},
                compressGravity:[
                    {label:'左上', value:'top-left'},
                    {label:'中上', value:'top'},
                    {label:'右上', value:'top-right'},
                    {label:'左中', value:'left'},
                    {label:'正中', value:'center'},
                    {label:'右中', value:'right'},
                    {label:'右下', value:'bottom-left'},
                    {label:'中下', value:'bottom'},
                    {label:'右下', value:'bottom-right'},
                ],
                formsModel:{
                    driver:'local',
                    config:{
                        compress:false,compress_ratio:'90',
                        crop:false,
                        crop_w:'200',
                        crop_h:'200',
                        watermark:false,
                        watermark_pic:'',
                        gravity:'bottom-right'
                    },
                    qiniu:{
                        default:'',
                        https:'',
                        access_key:'',
                        secret_key:'',
                        bucket:'',
                    },
                    oss:{
                        endpoint:'',
                        access_id:'',
                        access_key:'',
                        role_arn:'',
                        bucket:'',
                        ssl:false,
                    },
                    cos:{
                        app_id:'',
                        secret_id:'',
                        secret_key:'',
                        bucket:'',
                        region:'',
                        cos_url:'',
                        ssl:false,
                    }
                },
                formsSubmits:{
                    __table:'FileStore',
                    driver:'local',
                    config:{
                        compress:false,compress_ratio:'90',
                        crop:false,
                        crop_w:'200',
                        crop_h:'200',
                        watermark:false,
                        watermark_pic:'',
                        gravity:'SouthEast'
                    },
                    qiniu:{
                        default:'',
                        https:'',
                        access_key:'',
                        secret_key:'',
                        bucket:'',
                    },
                    oss:{
                        endpoint:'',
                        access_id:'',
                        access_key:'',
                        role_arn:'',
                        bucket:'',
                        ssl:false,
                        is_custom:false,
                        custom_domain:'',
                    },
                    cos:{
                        app_id:'',
                        secret_id:'',
                        secret_key:'',
                        bucket:'',
                        region:'',
                        cos_url:'',
                        ssl:false,
                    }
                }
            },
            methods:{
                compressGravityClick(e)
                {
                    var that = this;
                    that.formsModel.config.gravity = e;
                },

                formsModelSubmit()
                {
                    var that = this;
                    that.config.loading = true;
                    that.$refs['formsModel'].validate(function (valid) {
                        if (valid) {
                            that.formsSubmits.config = that.formsModel.config;
                            that.formsSubmits.qiniu = that.formsModel.qiniu;
                            that.formsSubmits.oss = that.formsModel.oss;
                            that.formsSubmits.cos = that.formsModel.cos;
                            that.formsSubmits.driver = that.formsModel.driver;
                            $Request.postJson('framework/setup/pageUpdateSetup', that.formsSubmits, function (res) {
                                if(res.code === 200){
                                    that.$Message(res.message, function () {
                                        that.config.view_loading = true;
                                        that.getFormsModule();
                                    });
                                } else {
                                    that.config.loading = false;
                                    that.$Message(res.message, 'warning');
                                }
                            })
                        } else {
                            that.config.loading = false;
                        }
                    });
                },

                getFormsModule()
                {
                    var that = this;

                    $Request.postJson('framework/setup/pageGetSetup', {__table: that.config.__table}, function (res) {
                        if(res.code === 200){
                            if(res.result.driver && !Array.isArray(res.result)){
                                that.formsModel.config = res.result.config;
                                that.formsModel.qiniu = res.result.qiniu;
                                that.formsModel.oss = res.result.oss;
                                that.formsModel.cos = res.result.cos;
                                that.formsModel.driver = res.result.driver;
                            }
                        }
                        that.config.view_loading = false;
                        that.config.loading = false;
                    })
                }
            },
            mounted(){
                this.getFormsModule();
            },
            created() {

            },
        })
    </script>
@endpush